<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>醋醋商城</title>
 <!--引用外部样式-->
 <link rel="shortcut icon" href="favicon.ico">
 <link type="text/css" rel="stylesheet"  href="css/basic.css">
 <link type="text/css" rel="stylesheet"  href="css/web.css">
 </head>
 <body>

<div id="TopMain">
	<!-- 广告开始 -->
	 <div id="topAdv"> 
		<a href="#"> <img src="images/adv.jpg" /> </a> 
		<img src="images/close.png"  class="close"/>
	 </div>
	<!-- 广告结束-->  

	<!--Top开始-->
	<div id="Top">
		<div class="banner"><a href="#"><img src="images/logo.png" /></a></div>
		<!--search begin-->
		<div class="search">
			<form>
				<input type="text"  class="txt"/>
				<input type="submit" class="but"  value=""/>
			</form>
		</div>
		<!--search end-->
		<div class="user">
			<!--用户登录前状态
			<font><span class="iconfont">&#xe60b;</span><a href="">登录</a></font>
			<font><span class="iconfont">&#xe60e;</span><a href="">注册</a></font>-->
			

			<!--用户登录后状态-->
			您好！鲁思南,欢迎你回来 <a href="consignee.html" class="usertxt">用户中心</a>｜<a href="index.html" class="usertxt">退出</a>

			<font><a href="dd.html"><img src="./images/shop.png" alt=""></a><a href="dd.html">购物车</a></font>
		</div>
	</div>
	<!--Top结束-->
</div>

<!--网站导航开始  滚动到一定高，给他加上 class="gd"-->
<div id="Logo" >
	<ul>
		<li class="first">
			<font class="iconfont">&#xe627;</font>全部商品分类
		</li>
		
		<li><a href="index.html" target="_blank">首页</a></li>
		<li><a href="Product00.html" target="_blank">家电</a></li>
		<li><a href="Product01.html"  target="_blank">手机</a></li>
		<li><a href="Product02.html"  target="_blank">电脑</a></li>
		<li><a href="Product03.html"  target="_blank">服饰</a></li>
		<li><a href="Product04.html"  target="_blank">家居</a></li>
		<li><a href="Product05.html"  target="_blank">食品</a></li>
		<li class="last"></li>
	</ul>
</div>
<!--网站导航结束-->






<!--面包屑导航开始-->
<div class="webLogo">当前位置: 
	<a href="index.html">首页</a> > <a href="">家电</a> > <a href="">洗衣机</a> > 海尔洗衣机
</div>
<!--面包屑导航结束-->



<!--内容页主体开始-->
<div id="webCon">

	<!--产品放大镜效果开始-->
	<div class="web_ProductImg">
	
		<div id="box">

			<!--小图展示 start-->
			<div class="simg">
				<img src="images/xpic13.jpg" width="450" height="450" />
				<span class="move"></span>
				<span class="shade"></span>
			</div>
			<!--小图展示 end-->

			<!--按扭 start-->
			<div class="but">
				<img src="images/xpic13.jpg" width="60" class="active"  dataSrc="images/xpic13.jpg"/>
				<img src="images/xpic23.jpg" width="60" dataSrc="images/xpic23.jpg" />
				<img src="images/xpic33.jpg" width="60" dataSrc="images/xpic33.jpg" />
			</div>
			<!--按扭 end-->

			<!--大图 start-->
			<div class="bimg"> <img src="images/xpic13.jpg" /></div>
			<!--大图 end-->

		</div>
	
	</div>
	<!--产品放大镜效果结束-->


	<div class="web_ProductXq">
	
		<ul>
			<li class="title"> 海尔（Haier)滚筒洗衣机全自动 洗烘一体 智能APP控制 防霉抗菌窗垫</li>
			<li class="two">
				<p>商品货号：ECS000000</p>
				<p>库存：70个</p>
			</li>
			<li class="two">
				<p>商品品牌：海尔（Haier)</p>
				<p>商品重量：50个</p>
			</li>
			<li  class="bor">
				<p>市场价格：市场价格：￥3299元
					本店售价：￥3100元
					注册用户：￥3108元
				</p>
			</li>
			<li class="yh">
				<h3>购买商品达到以下数量区间时可享受的优惠价格：</h3>
				<p class="ti"> <span>数量</span> <span>优惠价格</span> </p>
				<p class="ti money"> <span>3</span> <span>3600</span> </p>
				<p class="ti money"> <span>5</span> <span>4000</span> </p>
				<p class="allmoney"> 商品总价格:<font>3600</font></p>
			</li>
		
			<li class="two">
				<p>购买数量 <input type="text"  class="txt"/></p>
				<p>购买此商品可获得积分：119 </p>
			</li>
			
			<li>
				<p class="sx">颜色：<span> 红色</span>  <span> 黄色</span></p>
				<p class="sx">颜色：<span> 红色</span>  <span> 黄色</span></p>
			</li>
			
			<li class="but">
				<a href="dd.html"><img src="images/Webcar.png" /></a>
				<a href=""><img src="images/Websc.png" /></a>
			</li>

		</ul>
	
	
	
	</div>
</div>

<!--内容主体结束-->


<!--推荐产品开始-->
<div id="IntroProduct">
	<p class="ti">推荐产品</p>
	<ul>
		<li>
			<a href="#"><img src="images/dg_img23.jpg" width="220px" height="220" /></a>
			<p><a href="#">美的（Midea）9公斤变频滚筒洗衣机（白色） </a></p>
			<P class="money"><font>￥4564</font>  <span>289人购买</span></p>
		</li>  
		<li>
			<a href="#"><img src="images/dg_img33.jpg" width="220px" height="220" /></a>
			<p><a href="#">美的（Midea）9公斤变频滚筒洗衣机（白色） </a></p>
			<P class="money"><font>￥7981</font>  <span>189人购买</span></p>
		</li>  
		<li>
			<a href="#"><img src="images/dg_img33.jpg" width="220px" height="220" /></a>
			<p><a href="#">美的（Midea）9公斤变频滚筒洗衣机（白色） </a></p>
			<P class="money"><font>￥5612</font>  <span>389人购买</span></p>
		</li>  
		<li>
			<a href="#"><img src="images/dg_img23.jpg" width="220px" height="220" /></a>
			<p><a href="#">美的（Midea）9公斤变频滚筒洗衣机（白色） </a></p>
			<P class="money"><font>￥6598</font>  <span>388人购买</span></p>
		</li>  
 
	</ul>
</div>
<!--推荐产品结束-->


<!--产品详情开始-->
<div id="ProductInfo">
	<ul class="sel">
		<li class="active">商品描述<span></span></li>
		<li>商品属性 <span></span></li>
		<li>用户评论<span></span></li>
		<li>商品购买记录<span></span></li>
	</ul>

	<div id="ProductSelect">
		<div class="selCon" style="display:block;">商品描述</div>
		<div class="selCon">商品属性</div>
		<div class="selCon">用户评论</div>
		<div class="selCon">商品购买记录</div>
	</div>
	

</div>
<!--产品详情结束-->






<!--网站底部开始-->
<img src="images/f.jpg"  class="fbg"/>
<div id="Footer2">
	<dl class="first">
		<dt><a href="#">关于我们</a></dt>
		<dd><a href="#">诚聘英才</a></dd>
		<dd><a href="#">品牌入驻</a></dd>
		<dd><a href="#">友情链接</a></dd>
	</dl>
	<dl>
		<dt><a href="#">关于我们</a></dt>
		<dd><a href="#">诚聘英才</a></dd>
		<dd><a href="#">品牌入驻</a></dd>
		<dd><a href="#">友情链接</a></dd>
	</dl>
	<dl>
		<dt>关于我们</dt>
		<dd>诚聘英才</dd>
		<dd>品牌入驻</dd>
		<dd>友情链接</dd>
	</dl>
	<dl>
		<dt>关于我们</dt>
		<dd>诚聘英才</dd>
		<dd>品牌入驻</dd>
		<dd>友情链接</dd>
	</dl>
	<dl>
		<dt>关于我们</dt>
		<dd>诚聘英才</dd>
		<dd>品牌入驻</dd>
		<dd>友情链接</dd>
	</dl>
	<dl>
		<dt>关于我们</dt>
		<dd>诚聘英才</dd>
		<dd>品牌入驻</dd>
		<dd>友情链接</dd>
	</dl>
	<dl class="last">
		<dt>客服在线</dt>
		<dd>4006-600-000</dd>
		<dd><img src="images/QQ.jpg" /></dd>
	</dl>

	<div style="clear:both"></div>
</div>


<p class="Copy">Copyright © 2013-2015 www.tanzhouedu.com All Rights Reserved 版权所有：湖南潭州教育咨询有限公司 备案号：备13016338号</p>
<!--网站底部结束-->






<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
	$(".but img").mouseover(function(){
		//鼠标滑动到对图片按扭，图片加上红色边框，其它去掉边框
		$(this).addClass("active").siblings("img").removeClass("active"); 

		
		var bimg=$(this).attr("dataSrc");//获取小图片按扭对应的大图片地址
		$(".simg img,.bimg img").attr("src",bimg); //给小图片和大图展示赋值 
		

	});



	//鼠标滑动到遮罩层上.shade 时 ，的操作
	$("#box .simg .shade").hover(function(){
		$(".simg span.move,.bimg").show(); //小滑块和大图展示显示
	},function(){
		$(".simg span.move,.bimg").hide();//小滑块和大图展示隐藏
	});

	//当鼠标在遮罩层上.shade 移动时，动态来获取 小滑块的位置
	$("#box .simg .shade").mousemove(function(e){
		
		var x=e.clientX;  //鼠标与浏览器窗口左边距离
		var y=e.clientY+$(window).scrollTop(); //鼠标与浏览器窗口上面距离


		var l=$(this).offset().left;  //获取.shade与浏览器窗口左边距离
		var t=$(this).offset().top;  //获取 .shade 与浏览器窗口上边距离
		

		var w=$(".simg span.move").width()/2;  //获取小滑块宽度的一半
		var h=$(".simg span.move").height()/2; //获取小滑块高度的一半


		var _left=x-l-w;  //小滑块与 .shade 左边的距离
		var _top=y-t-h;  //小滑块与 .shade 上面的距离


		var bigW=$("#box .simg .shade").width()-w*2-2;  //滑块能滑动的最大宽度
		var bigH=$("#box .simg .shade").height()-h*2-2; //滑块能滑动的最大高度
		//document.title=_left+"="+_top;
		//通过_top判断，小滑块在竖直方向不能移出去 
		if(_top<0){
			_top=0; 
		}else if(_top>bigH){
			_top=bigH;
		}

		//通_left值判断 ，小滑块在水平方向不能移出去
		if(_left<0){
			_left=0;
		}else if(_left>bigW){
			_left=bigW;
		}

		//给小滑块赋值 top  left
		$(".simg span.move").css({"left":_left,"top":_top});


		//获以滑块滑动的宽度和高度的比例
		var wbl=_left/bigW;  //滑动宽度和最大滑动的宽度比例
		var hbl=_top/bigH;  //滑动高度和最大滑动的高度比例

		//document.title=wbl;

		var bigLeft=($(".bimg img").width()-$(".bimg").width())*wbl;  //大图向左移动距离
		var bigTop=($(".bimg img").height()-$(".bimg").height())*hbl;  //大图向上移动距离

		$(".bimg img").css({"left":-bigLeft,"top":-bigTop}); //动态给大图赋值

		
	});

</script>

<script type="text/javascript">
//选项卡效果
$("#ProductInfo ul.sel li").mouseover(function(){
	var _index=$(this).index();
	$(this).addClass("active").siblings("li").removeClass("active");
	$("#ProductSelect .selCon").eq(_index).show().siblings("div").hide();

});

</script>



<!--
	1、在News大盒子里面，构建两个一样大小的长方形，一个用来设背景透明，一个利用绝定位，盖在透明
	图层上面，用来放内容
	2、利用 h3标签来制作标题部分（颜色，大小，字体类型，竖直居中，首行缩进text-indent:20px;）
	3、利用 ul来制作新闻列表，文字竖直间距利用行高 line-height:30px;  给 ul添加对应的内边距，使文字与上右下左产生一定的间距。
	4、给文字加上了 a标签超链接，如何优化我们代码，代码的性能,如果把常用样式，统一初始化，我们选择的是用标签来表达，而不是用 *
-->




 </body>
</html>
